<template>
  <div class="loginBox">
    <!-- 做一个日记 -->
    <div class="version">
      <h4>更新日志</h4>
      <a-list item-layout="horizontal" :data-source="data">
        <template #renderItem="{ item }">
          <a-list-item>
            <a-list-item-meta :description="item.content">
              <template #title>
                <!-- <a href="https://www.antdv.com/">{{ item.title }}</a> -->
                {{ item.title }}
              </template>
              <template #avatar>
                <a-avatar src="http://show.huaxk.top/sb.png" />
              </template>
            </a-list-item-meta>
          </a-list-item>
        </template>
      </a-list>
    </div>
    <a-input class="inputLogin" v-model:value="userName" placeholder="账号">
      <template #prefix>
        <!-- <user-outlined type="user" /> -->
        <user-outlined />
      </template>
      <template #suffix>
        <a-tooltip title="Extra information">
          <info-circle-outlined style="color: rgba(0, 0, 0, 0.45)" />
        </a-tooltip>
      </template>
    </a-input>
    <br />
    <br />
    <a-input-password
      class="inputLogin"
      v-model:value="userPwd"
      placeholder="密码"
    >
      <template #prefix>
        <LockOutlined />
      </template>
    </a-input-password>
    <br />
    <br />
    <a-button class="inputLogin" type="primary" @click="submit()" block
      >登录</a-button
    >
  </div>
</template>

<script lang="ts">
import store from "@/store";
import { defineComponent, ref } from "vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue/es";
import { useRouter } from "vue-router";
interface DataItem {
  title: string;
  content: string;
}
export default defineComponent({
  components: { UserOutlined, LockOutlined },
  setup() {
    let userName = ref<string>("");
    let userPwd = ref<string>("");
    let router = useRouter();
    const submit = () => {
      if (userName.value == "root" && userPwd.value == "root123") {
        store.commit("isLogin", true as boolean);
        // router.push("./TokenContent");
        // router.push({ name: "TokenContent" });

        router.push("/TokenContent");
        message.success("登录成功");
      } else { 
        message.error("密码错误");
      }
    };

    const data: DataItem[] = [
      {
        title: "dmptoken ",
        content: "增删改查",
      },
      {
        title: "dmptoken",
        content: "dmptoken通过api来分发",
      },
      {
        title: "chekcurl",
        content: "检查网络ui和定时任务已写入",
      },
    ];
    data.reverse();
    return {
      userName,
      userPwd,
      submit,
      data,
    };
  },
  methods: {},
});
</script>

<style lang="scss" scoped>
.version {
  height: 400px;
  position: absolute;
  top: 220px;
  max-width: 425px;
  overflow: auto;
}
.loginBox {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  .inputLogin {
    max-width: 425px;
  }
}
</style>
